let echarts = require('echarts/lib/echarts')
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  pieEchart: function (id, data) {
    let option = {
      backgroundColor: 'transparent',
      color: ['#2391FF', '#1cc238', '#FFDF25', '#F45D41',
        '#8626e7', '#4AEAB0', '#3BA272',
        '#509039', '#C2A324', '#EA7CCC',
        '#B7401B', '#8F660C', '#DD8556', '#9A60B4'
      ],
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          const color = params.color
          const dotHtml =
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
            color +
            '"></span>'

          return dotHtml + params.name + '：' + params.value + ' 次'
        }
      },
      legend: {
        orient: 'vertical',
        y: 'center',
        right: '0%',
        textStyle: {
          color: '#fff',
        },
        formatter: function(name) {
          let data = option.series[0].data;
          let total = 0;
          let tarValue;
          for (let i = 0; i < data.length; i++) {
            total += parseFloat(data[i].value);
            if (data[i].name == name) {
              tarValue = data[i].value;
            }
          }
          let v = tarValue;
          let p = 0
          if(total!=0) {
            p = Math.round((tarValue / total) * 100);
          }
          return `${name}    ${p}%（${v}次）`;
        },
      },
      title: [
        {
          text: '{val|'+data.fraction+'}\n{name|故障总次数}',
          top: 'center',
          left: '19%',
          textAlign: 'center',
          textStyle: {
            rich: { //自定义样式
              name: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#999'
              },
              val: {
                fontSize: 38,
                fontWeight: 'bold',
                color: 'white'
              }
            }
          },
        }
      ],
      series: [
        { //主体圆环，带颜色部分
          type: 'pie',
          radius: ['47%', '72%'],
          center: ['19%', '50%'],
          data: data.data,
          z: 666,
          hoverAnimation: true,
          itemStyle: { //圆环部分的样式
            normal: {
              borderColor: '#242e43',
              borderWidth: 2
            }
          },
          labelLine: { // 每段环延伸出去的线条
            show: false,
            // length: 5, //第一段折线的长度
            // length2: 40, //第二段折线的长度
            // lineStyle: {
            //   type: 'dashed',
            //   cap: 'round'
            // }
          },
          label: { // 每段圆环延伸出去的文字说明
            show: false,
            // normal: {
            //   formatter: function (params) {
            //     if (params.name !== '') {
            //       return '{name|' + params.name + '}' + '\n' + '{value|' + params.percent + '%}'
            //     } else {
            //       return ''
            //     }
            //   },
            //   rich: {
            //     name: {
            //       fontSize: 12,
            //       color: '#999',
            //       lineHeight: 20
            //     },
            //     value: {
            //       fontSize: 12,
            //       color: 'white'
            //     }
            //   }
            // }
          }
        },
        { //最外层圆环 装饰用，不用来统计数据
          type: 'pie',
          radius: ['83%', '100%'],
          center: ['19%', '50%'],
          hoverAnimation: false,
          name: '',
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            {
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: '#2f3e65'
                }
              }
            }
          ],
          tooltip: {
            formatter: function (params) {
              return ''
            }
          }
        },
        { //最内层圆形，有渐变效果，用于图表装饰
          type: 'pie',
          radius: ['0%', '55%'],
          center: ['19%', '50%'],
          hoverAnimation: false,
          name: '',
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            {
              name: '',
              value: 0,
              itemStyle: { // 给圆设置渐变色
                color: {
                  type: 'radial', //径向渐变
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0.5, color: 'rgba(40, 66, 133, 0)' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#284285' // 100% 处的颜色 #284285 rgba(255,255,255, 0)
                  }]
                }
              }
            }
          ],
          tooltip: {
            formatter: function (params) {
              return ''
            }
          }
        }
      ]
    };

    let chartDom = echarts.getInstanceByDom(document.getElementById(id))
    if (chartDom == undefined) {
      chartDom = echarts.init(document.getElementById(id));
    }

    chartDom.setOption(option)

    window.addEventListener('resize', () => {
      chartDom.resize()
    })
    let erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById(id), function (element) {
      chartDom.resize()
    })
    return chartDom
  },
}
